<template>
	<view class="content">
		<view class="head">
			<view class="imgBox">
				<image src="/static/image/background2.png"></image>
			</view>
			<view class="infoBox">
				<view class="infoBox-hd">
					<view class="headImg">
						<image :src="womanList.head_url"></image>
					</view>
					<view class="right">
						<view class="title">{{womanList.name}}<text>{{womanList.star_name}}</text></view>
						<view class="education">年龄：{{womanList.age}}岁 | 经验：{{womanList.year}}年</view>
						<view class="nation">民族：{{womanList.nation}} | 籍贯：{{womanList.native_place}}</view>
						<view class="serve">服务：{{womanList.households}}户</view>
						<view class="price">价格：￥<text>{{womanList.price}}</text>元/26天</view>
					</view>
				</view>
				<view class="infoBox-ft">
					认证信息：
					<text v-for="(item, index) in womanList.label" :key="index">{{item}}</text>
				</view>
			</view>
			<view class="introduce">
				<view class="title">
					<image src="/static/image/attestation2.png" mode=""></image>
					综合介绍
				</view>
				<view class="body">
					{{womanList.introduce}}
				</view>
			</view>
		</view>
		<view class="auction">
			<view class="title" @click="openCalendar">
				<image src="/static/image/calendar.png" mode=""></image>
				档期安排
				<uni-icon type="arrow" size="24" color="#6f7484" @click="openCalendar"></uni-icon>
			</view>
		</view>
		<view class="evaluate">
			<view class="title">
				<view class="left">
					<image src="/static/image/evaluate.png" mode=""></image>
					客户评价<text>({{womanList.evaluate_list.length}})</text>
				</view>
				<view class="right">
					综合评分<text>{{womanList.evaluate_num.total}}</text>
				</view>
			</view>
			<view class="classify">
				<view class="item">
					<text class="name">宝宝护理</text>
					<uni-icon type="like" size="13" :color="item" v-for="(item, index) in likeList.likeList1" :key="index"></uni-icon>
					<text class="grade"as>{{evaluate_num.b_nursing}}</text>
				</view>
				<view class="item">
					<text class="name">宝宝早教</text>
					<uni-icon type="like" size="13" :color="item" v-for="(item, index) in likeList.likeList2" :key="index"></uni-icon>
					<text class="grade"as>{{evaluate_num.early_education}}</text>
				</view>
				<view class="item">
					<text class="name">膳食搭配</text>
					<uni-icon type="like" size="13" :color="item" v-for="(item, index) in likeList.likeList3" :key="index"></uni-icon>
					<text class="grade"as>{{evaluate_num.collocation}}</text>
				</view>
				<view class="item">
					<text class="name">科学喂养</text>
					<uni-icon type="like" size="13" :color="item" v-for="(item, index) in likeList.likeList4" :key="index"></uni-icon>
					<text class="grade"as>{{evaluate_num.feed}}</text>
				</view>
				<view class="item">
					<text class="name">产妇护理</text>
					<uni-icon type="like" size="13" :color="item" v-for="(item, index) in likeList.likeList5" :key="index"></uni-icon>
					<text class="grade"as>{{evaluate_num.m_nursing}}</text>
				</view>
				<view class="item">
					<text class="name">沟通技巧</text>
					<uni-icon type="like" size="13" :color="item" v-for="(item, index) in likeList.likeList6" :key="index"></uni-icon>
					<text class="grade"as>{{evaluate_num.communicate}}</text>
				</view>
			</view>
			<view class="commentList">
				<view class="item" v-for="(item, index) in womanList.evaluate_list" :key="index">
					<view class="headImg">
						<image :src="item.avatar_url" mode=""></image>
					</view>
					<view class="rightBox">
						<view class="nickName">{{item.name}}</view>
						<view class="pingfen"><text>服务天数: {{item.days}}天</text><text>评分: {{item.total}}分</text></view>
						<view class="textBox">
							{{item.content}}
						</view>
						<view class="time">{{item.create_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left" @click="getStore" :data-store="ifStore">
				<uni-icon :type="star" size="24" :color="storeColor"></uni-icon>
				<view>收藏</view>
			</view>
			<view class="right" @click="openOrderInfo" :data-matronid="womanList.id" :data-price="womanList.price" :data-headimg="womanList.head_url" :data-name="womanList.name">立即预约</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import { dns } from "@/pages/dns.js"
	export default {
		data(){
			return {
				id: '',
				womanList: [],
				star: 'star-o',
				storeColor: '#6f7484',
				ifStore: 0,//收藏状态
				likeList: {
					likeList1: ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8'],
					likeList2: ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8'],
					likeList3: ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8'],
					likeList4: ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8'],
					likeList5: ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8'],
					likeList6: ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8']
				},
				evaluate_num: {},//月嫂评分
			}
		},
	    components: {
			uniIcon
		},
		onLoad(e) {
			this.id = e.id;
			this.getwomanDetail();
		},
		methods:{
			getwomanDetail(){//获取月嫂详情
				uni.request({
					method: 'GET',
					data: {
						id: this.id
					},
					header:{
						token: uni.getStorageSync("token")
					},
					url: dns + 'matron/detail',
					success: (res)=>{
						console.log(res)
						if(res.data.status == -1){
							uni.showModal({
								title: '温馨提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor: '#ff5c5d',
								success: function (res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/my/index'
										});
									}
								}
							})
							return;
						}
						if(res.data.status == 0){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
							uni.setStorageSync("refresh",1)
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							},1000)
							return;
						}
						if(res.data.status == 1){
							this.womanList = res.data.data;
							this.ifStore = res.data.data.is_matroncollect;
							this.star = res.data.data.is_matroncollect == 0 ? 'star-o' : 'star';
							this.storeColor = res.data.data.is_matroncollect == 0 ? '#6f7484' : '#e04f47';
							this.evaluate_num = res.data.data.evaluate_num;
							//处理评分数据
							var num = [];
							var evaluate_nym = res.data.data.evaluate_num;
							for(var key in evaluate_nym){
								num.push(Math.floor(evaluate_nym[key]))
							}
							var list = this.likeList;
								var index = 0;
								for(var key in list){
									var value = num[index];
									for(var i = 0; i< value;i++){
										list[key][i] = '#e04f47';
									}
									index++;
								}
							this.likeList = list;
						}
					}
				})
			},
			getStore(e){//收藏月嫂
				var ifStore = e.currentTarget.dataset.store;
				if(ifStore == 0){//未收藏，点击收藏
					uni.request({
						method: 'GET',
						data: {
							matron_id: this.id
						},
						header:{
							token: uni.getStorageSync("token")
						},
						url: dns + 'matroncollect/add',
						success: (res)=>{
							wx.vibrateShort();//震动
							uni.showToast({
								title: res.data.msg
							})
							this.star = 'star';
							this.storeColor = '#e04f47';
							this.ifStore = 1
						}
					})
				};
				if(ifStore == 1){//已收藏，取消收藏
					uni.request({
						method: 'GET',
						data: {
							matron_id: this.id
						},
						header:{
							token: uni.getStorageSync("token")
						},
						url: dns + 'matroncollect/delete',
						success: (res)=>{
							console.log(res);
							this.star = 'star-o';
							this.storeColor = '6f7484';
							this.ifStore = 0
						}
					})
				}
				
			},
			openCalendar(){//打开档期日历
				uni.navigateTo({
					url: './calendar/index?id='+this.id
				})
			},
			openOrderInfo(e){//打开订单信息
				let matron_id = e.currentTarget.dataset.matronid;
				let price = e.currentTarget.dataset.price;
				let head_img = e.currentTarget.dataset.headimg;
				let name = e.currentTarget.dataset.name;
				uni.navigateTo({
					url: './orderinfo/index?matron_id='+matron_id+'&price='+price+'&head_img='+head_img+'&name='+name
				})
			}
		}
	}
</script>

<style lang="scss">
	$bg-color: linear-gradient(to right, #ed755e, #e04f47);
	.content{
		background-color: #f6f6f6;
		.head{
			background-color: #fff;
			.imgBox{
				width: 100%;
				height: 300upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.infoBox{
				position: relative;
				background-color: #fff;
				border-radius: 10upx;
				width: 90%;
				margin: 0 auto;
				margin-top: -250upx;
				z-index: 99;
				box-shadow: 6upx 6upx 20upx rgba(240, 151, 140,.1);
				padding: 36upx 30upx;
				.infoBox-hd{
					display: flex;
					.headImg{
						width: 220upx;
						height: 280upx;
						overflow: hidden;
						border-radius: 8upx;
						margin-right: 30upx;
						image{
							width: 280upx;
							height: 100%;
							transform: translateX(-30upx)
						}
					}
					.right{
						font-size: 22upx;
						color: #6f7484;
						.title{
							font-size: 40upx;
							font-weight: bold;
							color: #000;
							margin-bottom: 25upx;
							text{
								background-color: #d2a762;
								padding: 2upx 8upx;
								color: #fff;
								font-size: 18upx;
								margin-left: 10upx;
								font-weight: 400;
								vertical-align: middle;
								border-radius: 5upx;
							}
						}
						.education{
							margin-bottom: 16upx;
						}
						.nation{
							margin-bottom: 16upx;
						}
						.serve{
							margin-bottom: 16upx;
						}
						.price{
							font-size: 26upx;
							text{
								font-size: 40upx;
								color: #d0a45e;
							}
						}
					}
				}
				.infoBox-ft{
					font-size: 20upx;
					margin-top: 30upx;
					color: #6f7484;
					font-size: 22upx;
					text{
						display: inline-block;
						padding: 2upx 8upx;
						color: #e04f47;
						font-size: 18upx;
						border: 2upx solid rgba(224, 79, 70,.3);
						border-radius: 5upx;
						margin-right: 20upx;
						margin-bottom: 8upx;
					}
				}
			}
			.introduce{
				margin-top: 30upx;
				padding: 30upx;
				.title{
					position: relative;
					padding-left: 50upx;
					font-size: 34upx;
					font-weight: bold;
					margin-bottom: 20upx;
					image{
						position: absolute;
						width: 40upx;
						height: 40upx;
						top: 4upx;
						left: 0;
					}
				}
				.body{
					font-size: 26upx;
					color: #6f7484;
					text-indent: 2em;
				}	
			}
		}
		.auction{
			margin-top: 15upx;
			padding: 25upx 30upx;
			background-color: #fff;
			.title{
				position: relative;
				padding-left: 50upx;
				font-size: 34upx;
				font-weight: bold;
				image{
					position: absolute;
					width: 40upx;
					height: 40upx;
					top: 6upx;
					left: 0;
				}
				uni-icon{
					position: absolute;
					right: 0;
					top: 4upx;
				}
			}
		}
		.evaluate{//客户评价
			margin-top: 15upx;
			padding: 25upx 30upx;
			background-color: #fff;
			padding-bottom: 160upx;
			.title{
				position: relative;
				padding-left: 50upx;
				font-size: 34upx;
				font-weight: bold;
				padding-bottom: 25upx;
				.left{
					image{
						position: absolute;
						width: 38upx;
						height: 38upx;
						top: 6upx;
						left: 0;
					}
					text{
						font-weight: 400;
					}
				}
				.right{
					position: absolute;
					right: 15upx;
					top: -10upx;
					font-weight: 400;
					font-size: 28upx;
					height: 44upx;
					text{
						margin-right: 10upx;
						color: #e04f47;
						font-weight: bold;
						font-size: 40upx;
						font-style: italic;
						margin-left: 10upx;
					}
				}
			}
			.classify{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: 50%;
					font-size: 28upx;
					margin-bottom: 10upx;
					.name{
						margin-right: 10upx;
					}
					uni-icon{
						vertical-align: middle;
						margin-left: 4upx;
					}
					.grade{
						margin-left: 10upx;
						vertical-align: top;
						color: #e04f47;
					}
				}
				.item:nth-of-type(2n){
					text-align: right;
				}
			}
			.commentList{
				padding: 40upx 0;
				.item{
					display: flex;
					margin-bottom: 20upx;
					.headImg{
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.rightBox{
						flex: 1;
						font-size: 24upx;
						color: #6f7484;
						.nickName{
							color: #000;
							margin-bottom: 10upx;
						}
						.pingfen{
							margin-bottom: 10upx;
							text{
								margin-right: 20upx;
							}
						}
						.textBox{
							margin-bottom: 10upx;
						}
						.time{
							text-align: right;
						}
					}
				}
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150upx;
			background-color: #fff;
			display: flex;
			border-top: 1px solid #eee;
			padding: 28upx 30upx;
			.left{
				width: 15%;
				text-align: left;
				color: #5a6173;
				padding-left: 4upx;
				view{
					font-size: 24upx;
				}
			}
			.right{
				width: 85%;
				height: 95upx;
				border-radius: 10upx;
				text-align: center;
				line-height: 95upx;
				background: $bg-color;
				color: #fff;
				font-size: 32upx;
			}
		}
	}
</style>
